<?php
 /**
 * Syntax Coloring
 * 
 * This topic explains how to use the Syntax Coloring feature built in to CI Docs
 * 
 * @editing     This page is specific to CI Docs documentation, therefor should not be edited
 * @url     /general/syntax_coloring
 */
?>

<h1><?php echo $title; ?></h1>

<p>CI Docs includes <a href="http://code.google.com/p/syntaxhighlighter/" target="_blank" title="Visit Syntax Highlighter's Google Code page">Syntax Highlighter</a> so you can easily highlight a block of code in your examples or anywhere else in your documentation.</p>

<p>To highlight a block of code with color syntax you would use:</p>

<code>&lt;pre class="brush: <var>mode</var>"&gt;&lt;/pre&gt;</code>

<p>Where <var>mode</var> is the name of the coding language you are highlighting. Majority of the time this will be <strong>php</strong>, <strong>js</strong>, <strong>html</strong>, or <strong>css</strong>. For a list of all brush modes please see the available brushes at <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes" target="_blank" title="View Syntax Highlighter's available brushes">Syntax Highlighter's wiki page</a>.</p>

<p>You will also need to add the call to color syntax since it does not load on every page for performance reasons.</p>

<code>&lt;?php $this->docs->color_syntax() ?&gt;</code>

<p>The standard brushes that are loaded by the color syntax function are <strong>php</strong>, <strong>js</strong>, <strong>html</strong>, and <strong>css</strong>. If you are using one of the non-standard brushes then you will need to add it in an array when calling the color syntax function:</p>

<code>&lt;?php $this->docs->color_syntax(array('Ruby', 'Sql')) ?&gt;</code>

<p class="note"><strong>Note:</strong> Using color syntax is only recommended for bigger blocks of code. For a single line or a few lines for reference, please use a simple <dfn>&lt;code&gt;&lt;/code&gt;</dfn> tag instead. <dfn>&lt;code&gt;</dfn> tags are what is being used above.</p>

<h2>Example PHP code highlighted</h2>

<p>For PHP coloring you would use:</p>

<code>&lt;pre class="brush: php"&gt;&lt;/pre&gt;</code>

<p>Here is an example of some PHP code highlighted with Syntax Highlighter</p>

<pre class="brush: php">
&lt;?php
$str = 'one|two|three|four';

// positive limit
print_r(explode('|', $str, 2));

// negative limit (since PHP 5.1)
print_r(explode('|', $str, -1));
?&gt;
</pre>

<p class="important"><strong>Important:</strong> You will need to convert <dfn>&lt;</dfn> and <dfn>&gt;</dfn> to <dfn>&amp;lt;</dfn> and <dfn>&amp;gt;</dfn> in your code or errors may occur.</p>

<h2>Example JavaScript code highlighted</h2>

<p>For JavaScript coloring you would use:</p>

<code>&lt;pre class="brush: js"&gt;&lt;/pre&gt;</code>

<p>Here is an example of some JavaScript code highlighted with Syntax Highlighter</p>

<pre class="brush: js">
onerror = handleErr;

function handleErr(msg, url, l) {
  var txt = "";
  txt = "There was an error on this page.\n\n";
  txt += "Error: " + msg + "\n";
  txt += "URL: " + url + "\n";
  txt += "Line: " + l + "\n\n";
  txt += "Click OK to continue.\n\n";
  alert(txt);
  return true;
}
</pre>

<p class="important"><strong>Important:</strong> You will need to convert <dfn>&lt;</dfn> and <dfn>&gt;</dfn> to <dfn>&amp;lt;</dfn> and <dfn>&amp;gt;</dfn> in your code or errors may occur.</p>

<h2>Example HTML code highlighted</h2>

<p>For html coloring you would use:</p>

<code>&lt;pre class="brush: html"&gt;&lt;/pre&gt;</code>

<p>Here is an example of some HTML code highlighted with Syntax Highlighter</p>

<pre class="brush: html">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
	&lt;title&gt;Welcome&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;Hello World!&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<p class="important"><strong>Important:</strong> You will need to convert <dfn>&lt;</dfn> and <dfn>&gt;</dfn> to <dfn>&amp;lt;</dfn> and <dfn>&amp;gt;</dfn> in your code or errors may occur.</p>

<h2>Example CSS code highlighted</h2>

<p>For CSS coloring you would use:</p>

<code>&lt;pre class="brush: css"&gt;&lt;/pre&gt;</code>

<p>Here is an example of some CSS code highlighted with Syntax Highlighter</p>

<pre class="brush: css">
/*@ reset values */
html {height:100%;width:100%}
body {font:normal 62.5%/2em sans-serif;background:white;color:#333}
acronym {cursor:help}
html, body, h1, h2, h3, h4, h5, h6, form, ul, ol, li, dl, dt, dd, p {margin:0px;padding:0px;font-size:12px;list-style:none;text-align:left}
:link, :visited, :hover, :active, :focus {text-decoration:none;outline:0px}
h1, h2, h3, h4, h5, h6, pre, code, input, select, textarea, address, p, div, span {font:normal 12px sans-serif;text-align:left}
a img,:link img,:visited img, fieldset, abbr {border:0px}
table {border-collapse:collapse;border-spacing:0px}
td, caption, th, tfoot, thead {text-align:left;vertical-align:top}
input[type='submit'],input[type='button'],input[type='reset'] {text-align:center}
q:before, q:after {content:""}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
</pre>

<p class="important"><strong>Important:</strong> You will need to convert <dfn>&lt;</dfn> and <dfn>&gt;</dfn> to <dfn>&amp;lt;</dfn> and <dfn>&amp;gt;</dfn> in your code or errors may occur.</p>

<?php $this->docs->color_syntax(); ?>
